<template>
  <div class="cart">
      <h3>购物车</h3>
    <div class="inner" v-if="gwclist.length>0">
         <div class="item" v-for="(item,index) in gwclist" :key="index" @click="goto(item)"> 
        <div class="img">
          <img :src="item.pic" alt />
        </div>
        <div class="text">
          <div class="title">{{item.title}}</div>
          <div>已售：{{item.ys}}件</div>
          <div>
            单价：
            <span>￥{{item.dj}}</span>
          </div>
        </div>
        <div class="btn">
            <span @click.stop="sub(item)">-</span>
            {{item.count}}
            <span @click.stop="djadd(item.id)">+</span>
            </div>
      </div>
    </div>
    <div class="mysj">
       <img src="../assets/没有更多.png" alt="">
       <div>购物车空空如也，快去逛逛吧！</div>
       </div> 
       <div class="totalbar">
         <span>总数量:{{gwclist.reduce((total,item)=>{return total+item.count},0)}}件</span>
         <span>总价:￥{{gwclist.reduce((total,item)=>{return total+item.count*item.dj},0)}}元</span>
         <span class="js">去结算</span>
       </div>
  </div>
</template>

<script>
import { MessageBox } from 'mint-ui'
import 'mint-ui/lib/style.css'
import { mapState, mapGetters,mapMutations } from "vuex";

export default {
    data() {
        return {
        }
    },
    mounted(){
    },
    computed:{
        ...mapState(['gwclist']),
        // ...mapMutations(['djadd','djrem'])
    },
   methods: {
     sub(item){
       if(item.count===1){
         MessageBox.confirm('确定删除吗？').then(action=>{
             this.djrem(item.id)
         }).catch(()=>{
           return
         })
       }else{
          this.djrem(item.id)
       }
     },
       djadd(id){
           this.$store.commit('djadd', id);
       },
       djrem(id){
           this.$store.commit('djrem', id);
       },
       goto(item){
         this.$router.push({
           path:'confirm',
           query:{item}
         })
       }
   },
    
}

</script>

<style lang="scss">
.cart{
    width: 100%;
    height: 667px;
    position: relative;
    .totalbar{
      width: 100%;
      background: #eee;
      height: 50px;
      line-height: 50px;
      display: flex;
      position: absolute;
      bottom: 0;
      left: 0;
      span{
        flex: 1;
        text-align: center;
      }
      .js{
        background: red;
        color: aliceblue
      }
    }
    .mysj{
      width: 100%;
      height: 100px;
      text-align: center;
      margin-top: 30px;
    }
    h3{
        width: 100%;
        height: 40px;
        line-height: 40px;
        padding-left: 20px;
        border-bottom: 1px solid #eee;
    }
    .inner{
     width: 100%;
    height: 627px;  
    overflow: auto; 
    .item {
      display: flex;
      padding: 20px;
      position: relative;
      border-bottom: 1px solid #eee;
      .img {
        width: 60px;
        height: 60px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .text {
        flex: 1;
        padding: 0 20px;
        span {
          color: red;
        }
      }
      .btn {
        position: absolute;
        bottom: 20px;
        right: 10px;
        background: red;
        color: aliceblue;
        padding: 2px 5px;
      }
    }
    }
}
</style>